﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<%@include file="/common/taglibs.jsp"%>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="${ctx}/lib/html5.js"></script>
<script type="text/javascript" src="${ctx}/lib/respond.min.js"></script>
<script type="text/javascript" src="${ctx}/lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${ctx}/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/css/H-ui.login.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/css/style.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet"
	type="text/css" />
<title>后台登录 - H-ui.admin v2.3</title>
<meta name="keywords"
	content="H-ui.admin v2.3,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description"
	content="H-ui.admin v2.3，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<jsp:useBean id="aa" class="com.sso.entity.SysUser" />
	<input type="hidden" id="TenantId" name="TenantId" value="" />
	<div class="header"></div>
	<div class="loginWraper">
		
		<div id="loginDiv" class="loginBox">
			<form id="loginForm" class="form form-horizontal"action="${ctx }/login" method="post">
				<div class="row cl">
					<label class="form-label col-3"><i class="Hui-iconfont">&#xe60d;</i></label>
					<div class="formControls col-5">
						<input id="username" name="username" type="text" placeholder="登陆账号" class="input-text size-M">
					</div>
					<div class="col-4"></div>
				</div>
				<div class="row cl">
					<label class="form-label col-3"><i class="Hui-iconfont">&#xe60e;</i></label>
					<div class="formControls col-5">
						<input id="password" name="password" type="password"placeholder="登陆密码" class="input-text size-M">
					</div>
					<div class="col-4"></div>
				</div>
				<div class="row cl">
					<div class="formControls col-6 col-offset-3">
						<input class="input-text size-M" type="text" name="code" id="code"style="width: 150px;" maxlength="4" placeholder="验证码">
						<img src="images/VerifyCode.aspx.png">
						<a id="kanbuq"href="javascript:;">看不清，换一张</a>
					</div>
					<div class="col-3"></div>
				</div>
				<div class="row cl">
					<div class="formControls col-5 col-offset-3">
						<label for="online"> <input type="checkbox" name="online"id="online" value=""> 使我保持登录状态
						</label>
					</div>
					<div class="col-4"></div>
				</div>
				<div class="row cl">
					<div class="formControls text-c">
						<input id="login" type="submit" class="btn btn-success radius size-M" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
						<input id="reg" type="button" flipoutY-id="loginDiv" class="btn btn-default radius size-M" value="&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;册&nbsp;">
					</div>
				</div>
				<div class="formControls text-c"><p><font color="red">${errmsg }</font></p></div>
			</form>
		</div>
		<div id="regDiv" class="loginBox" style="display:none">
			<form id="regForm" class="form form-horizontal"action="${ctx }/user/register" method="post">
				<div class="row cl">
					<label class="form-label col-3">注册账号</label>
					<div class="formControls col-5">
						<input id="username" name="username" type="text" placeholder="账号" class="input-text size-M">
					</div>
					<div class="col-4"></div>
				</div>
				<div class="row cl">
					<label class="form-label col-3">真实姓名</label>
					<div class="formControls col-5">
						<input id="realname" name="realname" type="text"placeholder="真实姓名" class="input-text size-M">
					</div>
					<div class="col-4"></div>
				</div>
				<div class="row cl">
					<label class="form-label col-3">密码</label>
					<div class="formControls col-5">
						<input id="password" name="password" type="password"placeholder="密码" class="input-text size-M" plugin="passwordStrength">
						<div class="passwordStrength">
							<span>弱</span>
							<span>中</span>
							<span class="last">强</span>	
						</div>
					</div>
					<div class="col-4"></div>
				</div>
				<div class="row cl">
					<label class="form-label col-3">确认密码</label>
					<div class="formControls col-5">
						<input id="re_password" name="re_password" type="password"placeholder="确认密码" recheck="password" class="input-text size-M">
					</div>
					<div class="col-4"></div>
				</div>
				<div class="row cl">
					<div class="formControls col-6 col-offset-3">
						<input class="input-text size-M" type="text" name="code" id="code"style="width: 150px;" maxlength="4" placeholder="验证码">
						<img src="images/VerifyCode.aspx.png">
						<a id="kanbuq"href="javascript:;">看不清，换一张</a>
					</div>
				</div>
				<div class="row cl">
					<div class="formControls text-c">
						<input type="submit" class="btn btn-success radius size-M" value="&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;册&nbsp;">
						<input id="bank" type="button" flipoutY-id="regDiv" class="btn btn-default radius size-M" value="&nbsp;返&nbsp;&nbsp;&nbsp;&nbsp;回&nbsp;">
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="footer">Copyright 你的公司名称 by H-ui.admin.v2.3</div>
	<script type="text/javascript" src="${ctx}/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/H-ui.js"></script>
	<script type="text/javascript" src="${ctx }/lib/layer/1.9.3/layer.js"></script>
	<script type="text/javascript" src="${ctx }/lib/Validform/Validform.js"></script>
	<script type="text/javascript" src="${ctx }/lib/Validform/passwordStrength-min.js"></script>
	<script type="text/javascript">
		$(function() {
			var loginForm = $("#loginForm").Validform({
				tiptype : 2, //可选项 1=>pop box,2=>side tip(parent.next.find; with default pop),3=>side tip(siblings; with default pop),4=>side tip(siblings; none pop)，默认为1，也可以传入一个function函数，自定义提示信息的显示方式（可以实现你想要的任何效果，具体参见demo页）;
				showAllError : false,//可选项 true | false，true：提交表单时所有错误提示信息都会显示，false：一碰到验证不通过的就停止检测后面的元素，只显示该元素的错误信息;
				postonce : true, //可选项 表单是否只能提交一次，true开启，不填则默认关闭;
				ajaxPost : false, //使用ajax方式提交表单数据，默认false，提交地址就是action指定地址;
			});
			var registerForm = $("#regForm").Validform({
				tiptype : 2, //可选项 1=>pop box,2=>side tip(parent.next.find; with default pop),3=>side tip(siblings; with default pop),4=>side tip(siblings; none pop)，默认为1，也可以传入一个function函数，自定义提示信息的显示方式（可以实现你想要的任何效果，具体参见demo页）;
				showAllError : false,//可选项 true | false，true：提交表单时所有错误提示信息都会显示，false：一碰到验证不通过的就停止检测后面的元素，只显示该元素的错误信息;
				postonce : true, //可选项 表单是否只能提交一次，true开启，不填则默认关闭;
				ajaxPost : true, //使用ajax方式提交表单数据，默认false，提交地址就是action指定地址;
				usePlugin:{
					passwordstrength:{}
				},
				callback : function(data) {
					if (data.status == "T") {
						layer.msg(data.info,function(){window.location.reload();});
					}else{
						layer.msg(data.info);
					}
				}
			});
			//表单验证参数
			var addRule = [
				{
					ele : "#username",
					datatype : "username",
					nullmsg:"请输入用户名",
					errormsg : "请输入6-18位字符，可以包含字母数字下划线"
				},
				{
					ele : "#password",
					datatype : "pwd",
					nullmsg:"请输入密码",
					errormsg : "请输入6-18位字符，必须以字母开头，包含字母数字下划线"
				},
				{
					ele : "#code",
					datatype : "reandom",
					nullmsg : "请输入验证码",
					errormsg : "请输入4位验证码"
				},
				{
					ele:"#realname",
					datatype:"realname",
					nullmsg:"请输入真实姓名",
					errormsg:"请输入2-10位中文字符，特殊字符请在英文状态下输入"
				},
				{
					ele:"#re_password",
					datatype:"pwd",
					nullmsg:"请输入确认密码",
					errormsg:"两次密码输入不一致"
				}
			];
			//初始化表单验证参数
			loginForm.addRule(addRule);
			registerForm.addRule(addRule);
			$("#reg,#bank").click(function(){
				var id = $(this).attr("flipoutY-id");
				$('#'+id).addClass("hui-flipoutY");
			});
			$('#loginDiv').on({
				//标准语法
				'animationend':function(){
					$('#loginDiv').removeClass("hui-flipoutY");
					$('#loginDiv').css("display","none");
					$('#regDiv').css("display","block");
				},
				// Chrome, Safari 和 Opera语法
				'webkitAnimationEnd':function(){
					$('#loginDiv').removeClass("hui-flipoutY");
					$('#loginDiv').css("display","none");
					$('#regDiv').css("display","block");
				},
			});
			$('#regDiv').on({
				'animationend':function(){
					$('#regDiv').removeClass("hui-flipoutY");
					$('#regDiv').css("display","none");
					$('#loginDiv').css("display","block");
				},
				'webkitAnimationEnd':function(){
					$('#regDiv').removeClass("hui-flipoutY");
					$('#regDiv').css("display","none");
					$('#loginDiv').css("display","block");
				},
			});
		});
	</script>
</body>
</html>